<template>
  <Page class="bg-[#f5f5f5] text-[#222] leading-[1.6] pb-[88rpx]">
    <!-- 头部区域 -->
    <view class="bg-gradient-to-r from-[#4361ee] to-[#3f37c9] text-white py-[32rpx] shadow-md sticky top-0 z-[100] rounded-b-[32rpx]">
      <view class="flex items-center px-[32rpx]">
        <view class="w-[48rpx] h-[48rpx] flex items-center justify-center mr-[20rpx] text-[32rpx] cursor-pointer" @click="handleBack">
          <IconFont name="icon-arrow-left" />
        </view>
        <view class="text-[32rpx] font-bold flex-1">任务详情</view>
        <view class="w-[48rpx] h-[48rpx] flex items-center justify-center text-[28rpx] cursor-pointer" @click="handleShare">
          <IconFont name="icon-share-alt" />
        </view>
        <view class="w-[48rpx] h-[48rpx] flex items-center justify-center text-[28rpx] cursor-pointer" @click="handleMore">
          <IconFont name="icon-ellipsis-v" />
        </view>
      </view>
    </view>
    
    <view class="max-w-[750rpx] mx-auto px-[24rpx]">
      <!-- 任务详情卡片 -->
      <view class="bg-white rounded-[24rpx] p-[32rpx] my-[32rpx] shadow-md">
        <view class="flex justify-between items-start mb-[24rpx]">
          <view class="text-[32rpx] font-bold text-[#222] max-w-[80%]">企业官网UI设计（三阶段）</view>
          <view class="bg-gradient-to-r from-[#f72585] to-[#ff0a78] text-white px-[32rpx] py-[12rpx] rounded-[32rpx] font-bold text-[28rpx] min-w-[160rpx] text-center">¥1,850</view>
        </view>
        
        <view class="flex flex-wrap gap-x-[24rpx] gap-y-[12rpx] mb-[32rpx] pb-[24rpx] border-b border-[#e9ecef]">
          <view class="flex items-center text-[24rpx]">
            <IconFont name="icon-clock" class="mr-[12rpx] text-[#4361ee]" />
            <text>截止：2025-07-20</text>
          </view>
          <view class="flex items-center text-[24rpx]">
            <IconFont name="icon-location" class="mr-[12rpx] text-[#4361ee]" />
            <text>远程任务</text>
          </view>
          <view class="flex items-center text-[24rpx]">
            <IconFont name="icon-layer-group" class="mr-[12rpx] text-[#4361ee]" />
            <text class="bg-[rgba(67,97,238,0.1)] text-[#4361ee] px-[24rpx] py-[8rpx] rounded-[24rpx] font-bold">设计类</text>
          </view>
          <view class="flex items-center text-[24rpx]">
            <IconFont name="icon-user-check" class="mr-[12rpx] text-[#4361ee]" />
            <text>需实名认证</text>
          </view>
        </view>
        
        <!-- 任务描述 -->
        <view class="text-[28rpx] font-bold mb-[16rpx] flex items-center">
          <IconFont name="icon-file-alt" class="mr-[12rpx] text-[#4361ee]" />
          <text>任务描述</text>
        </view>
        <view class="mb-[32rpx] leading-[1.8] text-[24rpx] text-[#444]">
          <text>我们需要为一家科技公司设计全新的企业官网，要求采用现代化设计风格，符合科技公司的专业形象。网站需要包含首页、产品介绍、解决方案、关于我们和联系我们等核心页面。</text>
          <text class="block mt-[12rpx] font-bold">设计要求：</text>
          <view class="ml-[24rpx] mt-[8rpx]">
            <text class="block">- 响应式设计，适配PC、平板和手机</text>
            <text class="block">- 使用蓝色为主色调，体现科技感</text>
            <text class="block">- 设计风格简洁大气，避免过于花哨</text>
            <text class="block">- 提供完整的页面设计源文件（Sketch或Figma）</text>
            <text class="block">- 提供设计规范文档</text>
          </view>
          <text class="block mt-[12rpx] font-bold">交付标准：</text>
          <text class="block mt-[8rpx]">设计稿需包含所有页面的高保真原型，标注清晰，设计规范完整。</text>
        </view>
        
        <!-- 阶段详情 -->
        <view class="text-[28rpx] font-bold mb-[16rpx] flex items-center">
          <IconFont name="icon-tasks" class="mr-[12rpx] text-[#4361ee]" />
          <text>任务阶段</text>
        </view>
        <view class="mb-[32rpx]">
          <view 
            v-for="(stage, index) in stages" 
            :key="index"
            class="bg-[#f8f9fa] rounded-[16rpx] p-[24rpx] mb-[20rpx] relative border-l-[8rpx] border-l-[#4361ee]"
          >
            <view class="flex justify-between mb-[16rpx]">
              <view class="text-[24rpx] font-bold">{{ stage.name }}</view>
              <view class="text-[#f72585] font-bold text-[24rpx]">{{ stage.price }}</view>
            </view>
            <view class="pl-[16rpx]">
              <view 
                v-for="(detail, dIndex) in stage.details" 
                :key="dIndex"
                class="mb-[10rpx] relative pl-[20rpx] text-[22rpx] text-[#666]"
              >
                <text>{{ detail }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 执行者要求 -->
        <view class="text-[28rpx] font-bold mb-[16rpx] flex items-center">
          <IconFont name="icon-user-check" class="mr-[12rpx] text-[#4361ee]" />
          <text>执行者要求</text>
        </view>
        <view class="bg-[#f8f9fa] rounded-[16rpx] p-[24rpx] mb-[32rpx]">
          <view 
            v-for="(req, index) in requirements" 
            :key="index"
            class="flex items-center mb-[16rpx] last:mb-0"
          >
            <view class="w-[32rpx] h-[32rpx] flex items-center justify-center bg-[#4361ee] text-white rounded-full mr-[16rpx] text-[20rpx]">
              <IconFont name="icon-check" />
            </view>
            <view class="text-[24rpx]">{{ req.text }}</view>
            <view 
              class="ml-auto text-[22rpx] px-[16rpx] py-[6rpx] rounded-[16rpx] font-bold"
              :class="req.met ? 'bg-[#d4edda] text-[#155724]' : 'bg-[#f8d7da] text-[#721c24]'"
            >
              {{ req.met ? '已满足' : '未满足' }}
            </view>
          </view>
        </view>
      </view>
      
      <!-- 发布者信息 -->
      <view class="text-[28rpx] font-bold mb-[16rpx] flex items-center">
        <IconFont name="icon-user-tie" class="mr-[12rpx] text-[#4361ee]" />
        <text>任务发布方</text>
      </view>
      <view class="bg-white rounded-[24rpx] p-[32rpx] mb-[32rpx] shadow-md border border-[#e9ecef]">
        <view class="flex items-center mb-[24rpx]">
          <view class="w-[72rpx] h-[72rpx] rounded-full bg-[#e9ecef] flex items-center justify-center mr-[20rpx] font-bold text-[32rpx] text-[#4361ee]">科</view>
          <view class="flex-1">
            <view class="text-[28rpx] font-bold mb-[8rpx]">科技创新有限公司</view>
            <view class="flex gap-x-[20rpx] text-[22rpx] text-[#6c757d]">
              <view class="flex items-center">
                <IconFont name="icon-star" class="text-[#ffc107] mr-[6rpx]" />
                <IconFont name="icon-star" class="text-[#ffc107] mr-[6rpx]" />
                <IconFont name="icon-star" class="text-[#ffc107] mr-[6rpx]" />
                <IconFont name="icon-star" class="text-[#ffc107] mr-[6rpx]" />
                <IconFont name="icon-star-half-alt" class="text-[#ffc107] mr-[6rpx]" />
                <text>(4.7)</text>
              </view>
              <view class="flex items-center">
                <IconFont name="icon-badge-check" />
                <text class="ml-[6rpx]">企业认证</text>
              </view>
            </view>
          </view>
        </view>
        <view class="flex justify-around py-[20rpx] border-t border-b border-[#e9ecef] my-[20rpx]">
          <view class="flex flex-col items-center">
            <view class="text-[24rpx] font-bold text-[#4361ee]">87%</view>
            <view class="text-[20rpx] text-[#6c757d]">好评率</view>
          </view>
          <view class="flex flex-col items-center">
            <view class="text-[24rpx] font-bold text-[#4361ee]">42</view>
            <view class="text-[20rpx] text-[#6c757d]">已发布任务</view>
          </view>
          <view class="flex flex-col items-center">
            <view class="text-[24rpx] font-bold text-[#4361ee]">98%</view>
            <view class="text-[20rpx] text-[#6c757d]">完成率</view>
          </view>
        </view>
        <view>
          <button 
            class="w-full py-[20rpx] bg-[#f8f9fa] border border-[#e9ecef] rounded-[24rpx] font-bold text-[26rpx] cursor-pointer"
            @click="contactPublisher"
          >
            <IconFont name="icon-comment-dots" class="mr-[8rpx]" />
            联系发布方
          </button>
        </view>
      </view>
      
      <!-- 平台提示 -->
      <view class="bg-[#e6f7ff] border-l-[8rpx] border-l-[#165DFF] rounded-[24rpx] p-[32rpx] my-[32rpx] shadow-md">
        <view class="flex items-center mb-[16rpx]">
          <IconFont name="icon-info-circle" class="text-[#165DFF] mr-[12rpx]" />
          <text class="font-bold text-[26rpx]">平台提示</text>
        </view>
        <view class="mt-[16rpx] leading-[1.6] text-[24rpx] text-[#444]">
          <text class="block">1. 任务资金已全额托管在平台，安全有保障</text>
          <text class="block">2. 任务完成后，资金将按阶段划拨到您的账户</text>
          <text class="block">3. 平台服务费：普通会员15%，SVIP会员8%</text>
          <text class="block">4. 如有纠纷可申请平台仲裁，保障双方权益</text>
        </view>
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="fixed bottom-0 left-0 w-full bg-white p-[24rpx_32rpx] box-border shadow-md flex justify-between items-center h-[120rpx] z-[1000]">
      <view class="flex-1 pr-[24rpx]">
        <view class="text-[26rpx]">任务总金额：<text class="text-[#f72585] text-[32rpx] font-bold">¥1,850</text></view>
        <view class="text-[20rpx] text-[#6c757d]">任务资金已由发布方托管在平台</view>
      </view>
      <button 
        class="bg-gradient-to-r w-[200rpx] from-[#4361ee] to-[#3f37c9] text-white border-none py-[10rpx] rounded-[44rpx] text-[28rpx] font-bold cursor-pointer shadow-md transition-transform duration-300"
        @click="handleClaimTask"
        :disabled="isClaiming"
      >
        <template v-if="!isClaiming && !isClaimed">领取任务</template>
        <template v-if="isClaiming"><IconFont name="icon-spinner" class="animate-spin" /> 处理中...</template>
        <template v-if="isClaimed"><IconFont name="icon-check-circle" /> 已领取</template>
      </button>
    </view>
  </Page>
</template>

<script setup>
import { ref } from 'vue'
import { Taro } from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import { Button } from '@nutui/nutui-taro'

// 阶段数据
const stages = [
  {
    name: '阶段一：需求分析与原型设计',
    price: '¥600',
    details: [
      '与产品经理沟通需求，理解业务目标',
      '制作网站信息架构图',
      '设计低保真线框图',
      '设计高保真交互原型',
      '交付物：原型设计文件（PDF格式）'
    ]
  },
  {
    name: '阶段二：UI视觉设计',
    price: '¥850',
    details: [
      '设计首页视觉稿',
      '设计内页视觉稿（产品、解决方案等）',
      '设计移动端适配方案',
      '创建设计规范文档',
      '交付物：所有页面设计源文件（Sketch/Figma）'
    ]
  },
  {
    name: '阶段三：交付与修改',
    price: '¥400',
    details: [
      '根据反馈进行设计调整（不超过3次修改）',
      '提供切图资源包',
      '与开发团队交接设计细节',
      '最终交付所有设计文件'
    ]
  }
]

// 要求数据
const requirements = [
  { text: '必须通过平台实名认证', met: true },
  { text: '需提供3个以上UI设计案例', met: true },
  { text: '需具备企业官网设计经验', met: false }
]

// 状态管理
const isClaiming = ref(false)
const isClaimed = ref(false)

// 处理返回
const handleBack = () => {
  Taro.navigateBack()
}

// 处理分享
const handleShare = () => {
  Taro.showToast({
    title: '分享任务功能\n生成分享链接或二维码',
    icon: 'none',
    duration: 2000
  })
}

// 处理更多选项
const handleMore = () => {
  Taro.showToast({
    title: '显示更多选项：\n- 举报任务\n- 收藏任务\n- 查看任务规则',
    icon: 'none',
    duration: 2000
  })
}

// 联系发布方
const contactPublisher = () => {
  Taro.showToast({
    title: '打开与发布方的聊天窗口',
    icon: 'none',
    duration: 2000
  })
}

// 领取任务
const handleClaimTask = () => {
  // 检查是否已领取
  if (isClaimed.value) return
  
  // 检查是否满足所有要求
  const unmetRequirements = requirements.filter(req => !req.met)
  if (unmetRequirements.length > 0) {
    Taro.showToast({
      title: '您尚未满足所有任务要求，请完善资料后再申请',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  // 确认领取
  Taro.showModal({
    title: '确认领取任务',
    content: '确定要领取任务：企业官网UI设计（三阶段）吗？\n任务资金 ¥1,850 将被冻结，开始执行后按阶段结算',
    confirmText: '确认领取',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        // 模拟领取过程
        isClaiming.value = true
        
        setTimeout(() => {
          isClaiming.value = false
          isClaimed.value = true
          
          Taro.showToast({
            title: '任务领取成功！\n资金已冻结，请尽快联系发布方开始执行第一阶段工作',
            icon: 'none',
            duration: 2000
          })
        }, 1500)
      }
    }
  })
}
</script>